<template>
  <mm_warp>
    <mm_container class="container diy_view">
      <mm_row>
        <mm_col>
          <mm_view class="">
            <uni-forms :modelValue="form"  v-if="is_view()">
              <uni-forms-item v-if="$check_field('get','pet_name') || $check_field('add','pet_name') || $check_field('set','pet_name')" label="宠物名称" name="pet_name">
                <uni-easyinput type="text" v-model="form['pet_name']" v-if="user_group === '管理员' || (form['adoption_center_id'] && $check_field('set','pet_name')) || (!form['adoption_center_id'] && $check_field('add','pet_name'))" :disabled="disabledObj['pet_name_isDisabled']" />
                <!-- 仅查看 -->
                <text v-else-if="$check_field('get','pet_name')">
                  {{ form['pet_name'] }}
                </text>
              </uni-forms-item>
              <uni-forms-item v-if="$check_field('get','pet_species') || $check_field('add','pet_species') || $check_field('set','pet_species')" label="宠物种类" name="pet_species">
                <select v-model="form.pet_species" v-if="user_group === '管理员' || (form['adoption_center_id'] && $check_field('set','pet_species')) || (!form['adoption_center_id'] && $check_field('add','pet_species'))" class="query_select" :disabled="disabledObj['pet_species_isDisabled']" >
                  <option class="query_option" v-for="o in list_pet_species" :value="o['pet_species']">{{o['pet_species']}}</option>
                </select>
                <!-- 仅查看 -->
                <text v-else-if="$check_field('get','pet_species')">
                  {{ form['pet_species'] }}
                </text>
              </uni-forms-item>
              <uni-forms-item v-if="$check_field('get','pet_fur_color') || $check_field('add','pet_fur_color') || $check_field('set','pet_fur_color')" label="宠物毛色" name="pet_fur_color">
                <uni-easyinput type="text" v-model="form['pet_fur_color']" v-if="user_group === '管理员' || (form['adoption_center_id'] && $check_field('set','pet_fur_color')) || (!form['adoption_center_id'] && $check_field('add','pet_fur_color'))" :disabled="disabledObj['pet_fur_color_isDisabled']" />
                <!-- 仅查看 -->
                <text v-else-if="$check_field('get','pet_fur_color')">
                  {{ form['pet_fur_color'] }}
                </text>
              </uni-forms-item>
              <uni-forms-item v-if="$check_field('get','pet_sex') || $check_field('add','pet_sex') || $check_field('set','pet_sex')" label="宠物性别" name="pet_sex">
                <select v-model="form.pet_sex" v-if="user_group === '管理员' || (form['adoption_center_id'] && $check_field('set','pet_sex')) || (!form['adoption_center_id'] && $check_field('add','pet_sex'))" class="query_select" :disabled="disabledObj['pet_sex_isDisabled']" >
                  <option class="query_option" v-for="o in list_pet_sex" :value="o">{{o}}</option>
                </select>
                <!-- 仅查看 -->
                <text v-else-if="$check_field('get','pet_sex')">
                  {{ form['pet_sex'] }}
                </text>
              </uni-forms-item>
              <uni-forms-item v-if="$check_field('get','pet_pictures') || $check_field('add','pet_pictures') || $check_field('set','pet_pictures')" label="宠物图片" name="pet_pictures">
                <!-- 修改权限 -->
                <view class="diy_field diy_img" v-if="form['pet_pictures'] && $check_field('set','pet_pictures')">
                  <image v-if="disabledObj['pet_pictures_isDisabled']" :src="$fullUrl(form['pet_pictures'])" />
                  <image v-if="!disabledObj['pet_pictures_isDisabled']" :src="$fullUrl(form['pet_pictures'])" @click="change_img('pet_pictures')" />
                </view>
                <!-- 添加权限 -->
                <view class="diy_field diy_img" v-else-if="!form['pet_pictures'] && $check_field('add','pet_pictures')">
                  <view v-if="disabledObj['pet_pictures_isDisabled']" class="btn_add_img">
                    <text>+</text>
                  </view>
                  <view v-if="!disabledObj['pet_pictures_isDisabled']" class="btn_add_img" @click="change_img('pet_pictures')">
                    <text>+</text>
                  </view>
                </view>
                <!-- 查询权限 -->
                <view class="diy_field diy_img" v-else-if="$check_field('get','pet_pictures')">
                  <image :src="$fullUrl(form['pet_pictures'])" />
                </view>
              </uni-forms-item>
              <uni-forms-item v-if="$check_field('get','adoption_status') || $check_field('add','adoption_status') || $check_field('set','adoption_status')" label="领养状态" name="adoption_status">
                <select v-model="form.adoption_status" v-if="user_group === '管理员' || (form['adoption_center_id'] && $check_field('set','adoption_status')) || (!form['adoption_center_id'] && $check_field('add','adoption_status'))" class="query_select" :disabled="disabledObj['adoption_status_isDisabled']" >
                  <option class="query_option" v-for="o in list_adoption_status" :value="o">{{o}}</option>
                </select>
                <!-- 仅查看 -->
                <text v-else-if="$check_field('get','adoption_status')">
                  {{ form['adoption_status'] }}
                </text>
              </uni-forms-item>
              <uni-forms-item v-if="$check_field('get','pet_health') || $check_field('add','pet_health') || $check_field('set','pet_health')" label="宠物健康" name="pet_health">
                <uni-easyinput type="textarea" v-model="form['pet_health']" v-if="user_group === '管理员' || (form['adoption_center_id'] && $check_field('set','pet_health')) || (!form['adoption_center_id'] && $check_field('add','pet_health'))" :disabled="disabledObj['pet_health_isDisabled']" />
                <!-- 仅查看 -->
                <text v-else-if="$check_field('get','pet_health')">
                  {{ form['pet_health'] }}
                </text>
              </uni-forms-item>
              <uni-forms-item v-if="$check_field('get','pet_details') || $check_field('add','pet_details') || $check_field('set','pet_details')" label="宠物详情" name="pet_details">
                <uni-easyinput type="textarea" v-model="form['pet_details']" v-if="user_group === '管理员' || (form['adoption_center_id'] && $check_field('set','pet_details')) || (!form['adoption_center_id'] && $check_field('add','pet_details'))" :disabled="disabledObj['pet_details_isDisabled']" />
                <!-- 仅查看 -->
                <text v-else-if="$check_field('get','pet_details')">
                  {{ form['pet_details'] }}
                </text>
              </uni-forms-item>

            </uni-forms>
            <view class="form_button">
              <button size="mini" type="primary" @click="submit()">提交</button>
              <button size="mini" @click="cancel()">取消</button>
            </view>
          </mm_view>
        </mm_col>
      </mm_row>
    </mm_container>
  </mm_warp>
</template>

<script>
	import mixin from "@/mixins/page.js";

	export default {
		mixins: [mixin],
		data() {
			return {
              field: "adoption_center_id",
              url_add: "~/api/adoption_center/add?",
              url_set: "~/api/adoption_center/set?",
              url_get_obj: "~/api/adoption_center/get_obj?",
              url_upload: "~/api/adoption_center/upload?",

              query: {
                "adoption_center_id": 0,
              },

              form: {
                "pet_name":'', // 宠物名称
                "pet_species":'', // 宠物种类
                "pet_fur_color":'', // 宠物毛色
                "pet_sex":'', // 宠物性别
                "pet_pictures":'', // 宠物图片
                "adoption_status":'', // 领养状态
                "pet_health":'', // 宠物健康
                "pet_details":'', // 宠物详情
                "adoption_notice":'', // 领养须知
                "adoption_center_id": 0, // ID
              },
              disabledObj:{
                "pet_name_isDisabled": false,
                "pet_species_isDisabled": false,
                "pet_fur_color_isDisabled": false,
                "pet_sex_isDisabled": false,
                "pet_pictures_isDisabled": false,
                "adoption_status_isDisabled": false,
                "pet_health_isDisabled": false,
                "pet_details_isDisabled": false,
                "adoption_notice_isDisabled": false,
              },
              //宠物种类选项列表
              list_pet_species: [],
              //宠物性别选项列表
              list_pet_sex: ['公','母'],
              //领养状态选项列表
              list_adoption_status: ['待领养','已领养'],
			}
		},
		methods: {
          changeLog(v,value){
            this.form[value] = v
          },
          /**
           * 上传文件
           * @param {Object} param文件参数
           */
          change_file(key_name){
            var _self = this;
            // 选择图像方法
            uni.chooseFile({
              count: 1,
              sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
              sourceType: ['album'], //从相册选择
              success: function(res) {
                const tempFilePaths = res.tempFilePaths;
                const uploadTask = uni.uploadFile({
                  url: _self.$fullUrl('/api/adoption_center/upload?'),
                  filePath: tempFilePaths[0],
                  name: 'file',
                  formData: {
                    'i_want_to_customize': 'test'
                  },
                  header: {
                    'x-auth-token': _self.$store.state.user.token
                  },
                  success: function(uploadFileRes) {
                    var filename = JSON.parse(uploadFileRes.data).result.url
                    _self.form[key_name] = filename
                  }
                });

                uploadTask.onProgressUpdate(function(res) {
                  _self.percent = res.progress;
                  console.log('上传进度' + res.progress);
                  console.log('已经上传的数据长度' + res.totalBytesSent);
                  console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
                });
              },
              error: function(e) {
                console.log(e);
              }
            });
          },
          /**
           * 上传图片
           * @param {Object} param文件参数
           */
          change_img(key_name){
            var _self = this;
            // 选择图像方法
            uni.chooseImage({
              count: 1,
              sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
              sourceType: ['album'], //从相册选择
              success: function(res) {
                const tempFilePaths = res.tempFilePaths;
                const uploadTask = uni.uploadFile({
                  url: _self.$fullUrl('/api/adoption_center/upload?'),
                  filePath: tempFilePaths[0],
                  name: 'file',
                  formData: {
                    'i_want_to_customize': 'test'
                  },
                  header: {
                    'x-auth-token': _self.$store.state.user.token
                  },
                  success: function(uploadFileRes) {
                    var filename = JSON.parse(uploadFileRes.data).result.url
                    _self.form[key_name] = filename
                  }
                });

                uploadTask.onProgressUpdate(function(res) {
                  _self.percent = res.progress;
                  console.log('上传进度' + res.progress);
                  console.log('已经上传的数据长度' + res.totalBytesSent);
                  console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
                });
              },
              error: function(e) {
                console.log(e);
              }
            });
          },
          /**
           * 获取对象后获取缓存表单
           * @param {Object} json
           * @param {Object} func
           */
          get_obj_before(param){
            var form = uni.db.get("form");
            if (form) {
              this.obj = uni.push(this.obj ,form);
              this.form = uni.push(this.form ,form);
            }
            var arr = []
            for (let key in form) {
              arr.push(key)
            }
            for (var i=0;i<arr.length;i++){
              this.disabledObj[arr[i] + '_isDisabled'] = true
            }
            uni.db.del("form");
            return param;
          },
          /**
           * 获取宠物种类列表
           */
          async get_list_pet_species() {
            var json = await this.$get("~/api/pet_species/get_list?");
            if(json.result && json.result.list){
              this.list_pet_species = json.result.list;
            }
            else if(json.error){
              console.error(json.error);
            }
          },

          /**
           * 获取对象之后
           * @param {Object} json
           * @param {Object} func
           */
          get_obj_after(json, func){
          },

          is_view(){
            var bl = this.user_group == "管理员";

            if(!bl){
              bl = this.$check_action('/adoption_center/table','add');
              console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
            }
            if(!bl){
              bl = this.$check_action('/adoption_center/table','set');
              console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
            }
            if(!bl){
              bl = this.$check_action('/adoption_center/view','add');
              console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
            }
            if(!bl){
              bl = this.$check_action('/adoption_center/view','set');
              console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
            }
            if(!bl){
              bl = this.$check_action('/adoption_center/view','get');
              console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
            }

            console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");

            return bl;
          },

		},
		created() {
          this.get_list_pet_species();
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

    .form_button{
      padding-bottom: 15px;
      display: flex;
    }
    .form_button button{
      width: 40%;
    }
    .query_select{
      border-color: rgb(229, 229, 229);
      background-color: rgb(255, 255, 255);
      border-radius: 4px;
      box-sizing: border-box;
      flex: 1;
      width: 100%;
      line-height: 2;
      font-size: 14px;
      height: 2.4em;
      min-height: 2.4em;
      display: block;
      outline:none;
    }

    .query_option{
      width: 100%;
    }

    .btn_add_img{
      color: #D3D3D3;
      text-align: center;
      border: 1px solid #eee;
      height: 5rem;
      width: 5rem;
      position: relative;
    }
    .btn_add_img text{
      font-size: 35px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
</style>
